<template>
	<view class="container">
		
			<view class="header">
				<view class="arrow" @tap="$back()"><image src="../../static/images/arrow_left.png" mode="aspectFit"></image></view>
				<view class="text f36 cfff">盘点结果</view>
				<view class="save f36 cfff" @tap="finish()">{{inventoryInfo.is_complete==0 ? '结束' : ''}}</view>
			</view>
	


		<view class="resultsBox mb20">
			<view class="results-item f32">
				<view class="name">本次盘点</view>
				<view class="text">{{ total.inventory_num }}种货品（数量{{ total.operate_num }}）</view>
			</view>

			<view class="results-item f32">
				<view class="name">账面库存</view>
				<view class="text">{{ total.goods_num }}种货品（数量{{ total.store_num }}）</view>
			</view>

			<view class="results-item f32">
				<view class="name">盘亏</view>
				<view class="text">{{ total.dec_num_goods }}种货品（数量{{ total.dec_num }}）</view>
			</view>
			<view class="results-item f32">
				<view class="name">盘盈</view>
				<view class="text">{{ total.inc_num_goods }}种货品（数量{{ total.inc_num }}）</view>
			</view>
			<view class="results-item f32">
				<view class="name">未盘</view>
				<view class="text">{{ total.remain_inventory_goods }}种货品</view>
			</view>
		</view>

		<view class="resultsContent">
			<view class="results-li mb20" v-for="(item, index) in list" :key="index">
				<view class="dropInfo">
					<view class="left nowrap">
						<view class="pic">
							<dimg :src="item.pic"></dimg>
							</view>
						<view class="text nowrap">
							<view class="name f30 c333">{{ item.title }}</view>
							<view class="stock">
								<view class="f28 c333">盘点库存 : {{ add(item) }}</view>
								<view class="f28 c333">账面库存 : {{ convertAdd(item) }}</view>
							</view>
						</view>
					</view>
					<view class="right nowrap tRight">
						<view class="arrow" @click.stop="changeImg(index)">
							<image src="../../static/images/arrow_down.png" mode="aspectFit" v-show="!item.isok"></image>
							<image src="../../static/images/arrow_ondown.png" mode="aspectFit" v-show="item.isok"></image>
						</view>
						<view class="surplus f28">盘盈:{{ item.surplus }}</view>
					</view>
				</view>

				<view class="dropBox" v-show="item.isok">
					<view class="drop-item">
						<view class="tit">
							<view class="f28 c333">规格</view>
							<view class="f28 c333">盘点库存</view>
							<view class="f28 c333">账面库存</view>
							<view class="f28 c333">结果</view>
						</view>
						<view class="list" v-for="(val, i) in item.product_list" :key="i">
							<view class="f28 c333">
								<block v-for="(specval,valIndex) in val.spec_data" :key="valIndex">
									{{ specval }}
									<block v-if="valIndex < val.spec_data.length - 1">/</block>
								</block>
							</view>
							<view class="f28 c333">{{ val.operate_num }}</view>
							<view class="f28 c333">{{ val.convert_num }}</view>
							<view class="f28 c333">盘盈:{{ val.store_num }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view style="height: 130upx;"></view>
		<view class="fiexd-add"><view class="text f32 cfff" @click="open">调整库存并结束盘点</view></view>

		<!-- 调整库存弹窗 -->
		<uni-popup ref="popup" type="center">
			<view class="addContent">
				<view class="box">
					<view class="tit tCenter f36 c333">请输入变动备注</view>
					<view class="input-box"><input type="text" placeholder="最多输入8个字符" /></view>
					<view class="btn f30 tCenter">
						<view class="dropBtn" @click="close">取消</view>
						<view class="submit" @click="open">确定</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
	components: {
		uniPopup
	},
	data() {
		return {
			list: '',
			id: '',
			userid: '',
			total: {},
			inventoryInfo:{}
			
		};
	},
	onLoad(option) {
		this.id = option.id,
		this.userid = option.userid,
			this.list = [],
			this.list.map((item, index) => {
				console.log(index);
				this.list[index].isok = false;
			});
		this.getResults();
		this.getInfo()
	},
	methods: {
		//盘点单详情
		getInfo() {
			let that = this;
			that.$ajax('api/v1.inventory/info', {
				inventory_id: that.id
			})
				.then(res => {
					if (res.code == 1) {
						that.inventoryInfo = res.result.info;
						
					}
				})
				.catch(res => {
					that.$sToast(res.message);
				});
		},
		open() {
		
			let that=this;
			that.$ajax('api/v1.inventory/submit',{
				is_adjust: 1,
				 remark: '提交盘点',
				 inventory_id:that.id
			}).then(res=>{
					that.$refs.popup.open();
			}).catch(res=>{
				that.$sToast(res.message);
			})
	
			
		},
		close() {
			this.$refs.popup.close();
		},
		changeImg(index) {
			let list = this.list;
			list[index].isok = !list[index].isok;
			this.list = list;
			this.$set(this.list, index, list[index]);
		},

		getResults() {
			let that = this;
			that.$ajax('api/v1.inventory/user', {
				inventory_id: that.id,
				user_id: that.userid,
				page_size: 100
			})
				.then(res => {
					if (res.code == 1) {
						that.total = res.result.total;
						that.list = res.result.page_list;
						
					}
				})
				.catch(res => {
					that.$sToast(res.message);
				});
		},
		finish(){
			let that=this;
			that.$ajax('api/v1.inventory/submit',{
				is_adjust:0,
				 remark: '提交盘点',
				 inventory_id:that.id
			}).then(res=>{
				if(res.code==1){
					uni.showModal({
					    title: '温馨提示',
					    content: '直接结束盘点不会对库存做调整,您确定要结束盘点吗?',
					    success: function (res) {
					        if (res.confirm) {
					          uni.navigateTo({
					          	url:'./keepsheet'
					          })
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
				}
			}).catch(res => {
					that.$sToast(res.message);
				});
		},
		add(item){
			let total=0
			item.product_list.forEach(item=>{
				total=+item.operate_num+total
			})
			return total
		},
		convertAdd(item){
			let convert=0
			item.product_list.forEach(item=>{
				convert=+item.convert_num+convert
			})
			return convert
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f7f4f8;
}

.status_bar {
	height: var(--status-bar-height);
	width: 100%;
	background-color: #ffffff;
}

.top_view {
	height: var(--status-bar-height);
	width: 100%;
	position: fixed;
	background-color: #fff;
	top: 0;
	z-index: 999;
}

.fiexd-top {
	width: 100%;
	position: fixed;
	z-index: 99999;
}

.header {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	background-color: #249af6;
	padding:60upx 30upx 20upx 30upx;

	.arrow {
		image {
			width: 22upx;
			height: 40upx;
		}
	}
}

.resultsBox {
	.results-item {
		background-color: $white-background;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 30upx;
		border-bottom: 2upx #eee solid;

		&:nth-child(3) {
			.text {
				color: #f64444;
			}
		}

		&:nth-child(4) {
			.text {
				color: #249af6;
			}
		}
	}
}

.resultsContent {
	.results-li {
		.dropInfo {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 40upx 30upx;
			background-color: $white-background;
			.left {
				width: 60%;
				display: flex;
				flex-direction: row;

				.pic {
					image {
						width: 130upx;
						height: 130upx;
						margin-right: 30upx;
					}
				}

				.text {
					.name {
						padding-bottom: 18upx;
					}

					.stock {
						view {
							&:first-child {
								padding-bottom: 6upx;
							}
						}
					}
				}
			}

			.right {
				width: 40%;
				padding-top: 20upx;

				.arrow {
					margin-bottom: 55upx;
					display: flex;
					justify-content: flex-end;

					image {
						width: 25upx;
						height: 15upx;
					}
				}

				.surplus {
					color: #249af6;
				}
			}
		}

		.dropBox {
			.drop-item {
				background-color: #eee;
				border-bottom: 2upx #ddd solid;
				.tit {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					flex-wrap: wrap;
					padding: 30upx 0;
					view {
						width: 25%;
					}
				}
				.list {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					flex-wrap: wrap;
					padding: 0 0 30upx 0;
					view {
						width: 25%;
					}
				}
				&:last-child {
					border-bottom: none;
				}
				view {
					text-align: center;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}
}

.fiexd-add {
	width: 100%;
	position: fixed;
	bottom: 0;
	height: 100upx;
	line-height: 100upx;
	background-color: #249af6;

	.text {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
}
</style>
